{% extends 'myhome/public/base.html' %}


{% block css %}
<link rel="stylesheet" type="text/css" href="/static/myhome/css/list.css">
<link rel="stylesheet" type="text/css" href="/static/myhome/css/list-app.css">
{% endblock %}



{% block con %}
<div class="mainlist app-list">
    <div class="container">
        <!-- 面包屑 导航 -->
        <div class="ml-nav hidden-xs hidden-sm">
            <ol class="breadcrumb">
                <li>
                    <a href="/">首页</a></li>
                <li>
                    <a href="{% url 'myhome_list' data.id %}">{{ data.name }}</a></li>
            </ol>
        </div>
        <!-- 分类列表 -->
        <div class="selector hidden-xs hidden-sm">
            <div class="sl-category">
                <div class="sl-line-wrap clearfix">
                    <div class="mod-key">分类：</div>
                    <div class="mod-value">
                        <div class="mod-value-list">
                            <ul>
                                {% for v in data.items %}
                                <li class="">
                                    <a href="{% url 'myhome_list' v.id %}" {% if v.id == ob.id %} style="color:#337ab7;" {% endif %} title="{{ v.name }}">{{ v.name }}</a></li>
                                {% endfor %}
                            </ul>
                        </div>
                    </div>
                </div>
            </div>
        </div>
        
        <!-- 分类导航 -->
        <div class="filter clearfix hidden-xs hidden-sm" style="display:block">
            <div class="filter-order">
                <a class="active" data-tag="0" data-mtype="store_list_sx_1" href="javascript:void(0);">推荐</a>
                <a data-tag="1" data-mtype="store_list_sx_2" href="javascript:void(0);">新品</a>
                <a data-tag="2" data-mtype="store_list_sx_3" href="javascript:void(0);">价格
                    <i class="icon-arrow-down"></i></a>
            </div>
            <div class="filter-condition">
                <label class="bs-checkbox" data-mtype="store_list_sx_xz">
                    <i>
                    </i>仅显示有货商品</label>
            </div>
        </div>
        <!-- 分类导航 E -->
        <!-- 商品列表 -->
        <div class="goods-list">
            <div class="row">
                {% for v in data.goodslist %}
                <div class="col-md-3 col-sm-6 col-xs-6">
                    <div class="gl-item">
                        <div class="compare-btn-list">
                            <i class="iconfont  icon-duibi compare-duibi"></i>
                            <span class="hidden-xs hidden-sm">对比</span></div>
                        <div class="gl-item-wrap">
                            <!-- Tab panes -->
                            <div class="tab-content">
                                <div role="tabpanel" class="tab-pane active mod-pic" id="list-p1">
                                    <a href="{% url 'myhome_info' v.id %}">
                                        <img class="lazy j-modProduct" src="{{ v.pic }}" width="220" height="220"></a>
                                </div>
                            </div>
                            <!-- Nav tabs -->
                            <div class="item-slide j-pro-wrap  hidden-xs hidden-sm">
                                <ul class="nav nav-tabs  " role="tablist">
                                    <li role="presentation" class="active">
                                        <a href="{% url 'myhome_info' v.id %}" aria-controls="list-p1" role="tab" data-toggle="tab">
                                            <img class="lazy" src="{{ v.pic }}" style="display: inline;" width="40" height="40"></a>
                                    </li>
                                </ul>
                            </div>
                    
                            <p>{{ v.title }}</p>
                            <h3 class="red" title="现货速发  双瞳如小窗 佳景观历历">现货速发 双瞳如小窗 佳景观历历</h3>
                            <dd class="mod-price">
                                <span>￥</span>
                                <span class="vm-price">{{ v.price }}</span>
                                <span class="vm-start">起</span></dd>
                        </div>
                    </div>
                </div>
             {% endfor %}

            </div>
        </div>
        <!-- 商品列表 -->
        <!-- 推荐商品 -->
        <div class="recommend  hidden-xs hidden-sm">
            <div class="recommend-hd">
                <h2 class="mod-title">为您推荐</h2></div>
            <div class="recommend-slider">
                <div class="flex-viewport" style="overflow: hidden; position: relative;">
                    <ul class="recommend-slider-wrap" style="width: 1000%; transition-duration: 0s; transform: translate3d(0px, 0px, 0px);">
                        <li class="rs-item" style="width: 245.6px; margin-right: 5px; float: left; display: block;">
                            <a class="rs-item-wrap" title="魅蓝 Note5" href="#" target="_blank">
                                <div class="mod-pic">
                                    <img src="/static/myhome/img/list81.jpg" style="display: inline;" width="180" height="180"></div>
                                <div class="mod-desc">
                                    <h4 class="vm-title">魅蓝 Note5</h4>
                                    <h6 class="vm-subtitle" title="6期免息  16G直降100元">6期免息 16G直降100元</h6>
                                    <p class="vm-price">
                                        <span>¥</span>
                                        <span class="vm-price-text">899</span></p>
                                </div>
                                <span class="mod-sign" style="background-color: #f0415f;">特惠</span></a>
                        </li>
                        <li class="rs-item" style="width: 245.6px; margin-right: 5px; float: left; display: block;">
                            <a class="rs-item-wrap" title="魅蓝 5s" href="#" target="_blank">
                                <div class="mod-pic">
                                    <img src="/static/myhome/img/list82.jpg" style="display: inline;" width="180" height="180"></div>
                                <div class="mod-desc">
                                    <h4 class="vm-title">魅蓝 5s</h4>
                                    <h6 class="vm-subtitle" title="32G版限量赠壳膜">32G版限量赠壳膜</h6>
                                    <p class="vm-price">
                                        <span>¥</span>
                                        <span class="vm-price-text">999</span></p>
                                </div>
                            </a>
                        </li>
                        <li class="rs-item" style="width: 245.6px; margin-right: 5px; float: left; display: block;">
                            <a class="rs-item-wrap" title="魅族 MX6" href="#" target="_blank">
                                <div class="mod-pic">
                                    <img src="/static/myhome/img/list83.jpg" style="display: inline;" width="180" height="180"></div>
                                <div class="mod-desc">
                                    <h4 class="vm-title">魅族 MX6</h4>
                                    <h6 class="vm-subtitle" title="全金属 拍照旗舰">全金属 拍照旗舰</h6>
                                    <p class="vm-price">
                                        <span>¥</span>
                                        <span class="vm-price-text">1599</span></p>
                                </div>
                            </a>
                        </li>
                        <li class="rs-item" style="width: 245.6px; margin-right: 5px; float: left; display: block;">
                            <a class="rs-item-wrap" title="魅蓝 Max" href="#" target="_blank">
                                <div class="mod-pic">
                                    <img src="/static/myhome/img/list84.jpg" style="display: inline;" width="180" height="180"></div>
                                <div class="mod-desc">
                                    <h4 class="vm-title">魅蓝 Max</h4>
                                    <h6 class="vm-subtitle" title="大屏长续航 享3期免息">大屏长续航 享3期免息</h6>
                                    <p class="vm-price">
                                        <span>¥</span>
                                        <span class="vm-price-text">1699</span></p>
                                </div>
                            </a>
                        </li>
                        <li class="rs-item" style="width: 245.6px; margin-right: 5px; float: left; display: block;">
                            <a class="rs-item-wrap" title="魅蓝 E2" href="#" target="_blank">
                                <div class="mod-pic">
                                    <img src="/static/myhome/img/list85.jpg" style="display: inline;" width="180" height="180"></div>
                                <div class="mod-desc">
                                    <h4 class="vm-title">魅蓝 E2</h4>
                                    <h6 class="vm-subtitle" title="三色现货 购机享3期免息">三色现货 购机享3期免息</h6>
                                    <p class="vm-price">
                                        <span>¥</span>
                                        <span class="vm-price-text">1299</span></p>
                                </div>
                            </a>
                        </li>
                    </ul>
                </div>
            </div>
        </div>
        <!-- 推荐商品 E -->
    </div>
</div>
{% endblock %}